<!-- 横向项目和纵向项目 table -->
<template>
  <div>
    <el-table
      :header-cell-style="{ background: '#ECF1F9', color: '#1D2E54' }"
      v-loading="listLoading"
      :data="projectlistArr"
      style="width: 100%"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column label="#" type="index" width="100px" align="center" />

      <el-table-column label="项目名称" align="center" width="140">
        <template slot-scope="scope">
          {{ scope.row.projectName ? scope.row.projectName : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="主管单位" align="center" width="110">
        <template slot-scope="scope">
          {{ scope.row.primaryUnit ? scope.row.primaryUnit : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="合作单位" align="center">
        <template slot-scope="scope">
          {{ scope.row.cooperateUnit ? scope.row.cooperateUnit : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="项目周期" align="center" width="220">
        <template slot-scope="scope">
          {{ scope.row.projectCycle ? scope.row.projectCycle : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="立项申请书" align="center" width="180">
        <template slot-scope="scope">
          <div
            v-for="(item, index) in JSON.parse(scope.row.appendixUrl)"
            :key="index"
          >
            {{ item.fileName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="申请人" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.createBy ? scope.row.createBy : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="申请时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime ? scope.row.createTime : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" v-if="current == 0">
        <template slot-scope="scope">
          <!-- 0-未提交，1-待审核，2-审核中，3-已审核 -->
          <el-link type="info" v-if="scope.row.status == 0">未提交</el-link>
          <el-link type="success" v-if="scope.row.status == 1">待审核</el-link>
          <el-link v-if="scope.row.status == 2">审核中</el-link>
          <el-link v-if="scope.row.status == 3" type="warning">已审核</el-link>
        </template>
      </el-table-column>

      <el-table-column label="审批结果" align="center" v-if="current == 0">
        <!-- 0 已通过 1 已驳回 2 未审批 -->
        <template slot-scope="scope">
          <el-link type="primary" v-if="scope.row.approveResult == 0">
            同意
          </el-link>
          <el-link type="danger" v-else-if="scope.row.approveResult == 1">
            驳回
          </el-link>
          <!-- <el-link type="info" v-show="scope.row.approveResult == 2"
            >未审批</el-link
          > -->
          <el-link type="info" v-else>--</el-link>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        v-if="current == 0 && !isReview"
      >
        <template slot-scope="scope">
          <!-- {{ scope.row.projectPeriod }} -->
          <!-- 修改：当项目阶段处于申报阶段时，可以进行修改；角色不是科研管理员，projectCategory=REPORT时 -->
          <!-- <div v-if="!isKeGuan && scope.row.status == '0'">
            <el-link type="primary">修改</el-link>
          </div> -->

          <!-- 详情：任何时候都可以查看详情 -->
          <!-- <div>
            <el-link @click="viewDetails(scope.row)" type="success"
              >详情11</el-link
            >
          </div>
          <el-link
            v-if="!isKeGuan && scope.row.projectPeriod == 'REGISTER_RESULT'"
            @click="viewDetails(scope.row)"
            type="success"
            >去登记</el-link
          > -->

          <!-- 只看详情，不显示登记 -->
          <el-button
            v-if="scope.row.projectPeriod == 'TRIAL'"
            @click="viewDetailsAA(scope.row)"
            type="primary"
            plain
            size="mini"
          >
            详情
          </el-button>
          <!-- 详情aa -->
          <div v-if="scope.row.projectPeriod == 'REGISTER_RESULT'">
            <!-- 只看详情,已经存在流程信息了，不显示登记 -->
            <el-button
              @click="viewDetailsBB(scope.row)"
              type="primary"
              plain
              size="mini"
            >
              详情
            </el-button>
            <el-button
              v-if="!isKeGuan"
              @click="toDengJi(scope.row)"
              type="success"
              plain
              size="mini"
            >
              去登记
            </el-button>
          </div>

          <!-- 看详情，不能登记，显示登记详情 -->
          <div v-if="scope.row.projectPeriod == 'FINISHED'">
            <el-button
              plain
              size="mini"
              @click="viewDetailsCC(scope.row)"
              type="primary"
            >
              详情
            </el-button>
          </div>

          <!-- 状态==0，未提交 -->
          <div v-if="scope.row.status == 0">
            <el-button
              plain
              size="mini"
              @click="changeVal(scope.row)"
              type="success"
            >
              修改
            </el-button>
          </div>

          <!-- 变更：当变更状态等于1时；角色不是科研管理员 isChange=1 -->
          <!-- <div v-if="!isKeGuan && scope.row.isChange == 1">
            <el-link type="primary">变更</el-link>
          </div> -->

          <!-- 变更详情：当变更完成时 isChangeAlready=1 -->
          <!-- <div v-if="scope.row.isChangeAlready == 1">
            <el-link type="success">变更详情</el-link>
          </div> -->
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        v-if="current == 0 && isReview"
        width="100"
      >
        <template slot-scope="{ row }">
          <el-button
            plain
            size="mini"
            type="warning"
            v-if="row.status == 1 && isKeGuan"
            @click="toShenPro(row)"
          >
            待审批
          </el-button>
        </template>
      </el-table-column>

      <!-- 纵向、横向项目没有草稿箱 -->
      <!-- <el-table-column label="操作" align="center" v-if="current == 1">
        <template slot-scope="scope">
          <el-link
            style="margin-right: 10px"
            v-if="!isKeGuan"
            type="primary"
            @click="updateOtherInfo(scope.row)"
            >编辑</el-link
          >
          <el-link v-if="!isKeGuan" type="danger">删除</el-link>
        </template></el-table-column
      > -->
    </el-table>
  </div>
</template>

<script>

export default {
  props: {
    // 是否是审核列表
    isReview: {
      type: Boolean,
      default: false,
    },
    listLoading: {
      type: Boolean,
      default: false,
    },
    isKeGuan: {
      type: Boolean,
      default: false,
    },
    projectlistArr: {
      type: Array,
      default: () => [],
    },
    current: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      step_1: require("@/assets/static/imgs/step_1.png"),
      step_2: require("@/assets/static/imgs/step_2.png"),
      step_3: require("@/assets/static/imgs/step_3.png"),
      step_4: require("@/assets/static/imgs/step_4.png"),
      step_5: require("@/assets/static/imgs/step_5.png"),
    };
  },
  methods: {
    //  只看详情，不显示登记
    viewDetailsAA(row) {
      this.$store.dispatch("project/setNewPeo", false);
      this.$store.dispatch("project/showDengJiFn", false); // 登记结果
      this.viewDetails(row);
    },

    // 只看详情,已经存在流程信息了，不显示登记
    viewDetailsBB(row) {
      this.$store.dispatch("project/showDengJiFn", false); // 登记结果
      this.viewDetails(row);
    },

    // 去登记
    toDengJi(row) {
      this.$store.dispatch("project/showDengJiFn", true); // 登记结果
      this.$store.dispatch("project/setShowDengJiInput", true); // 能输入登记信息
      this.$store.dispatch("project/SetIsSeeProcess", false);
      this.viewDetails(row);
    },

    // 看详情，不能登记，显示登记详情
    viewDetailsCC(row) {
      this.$store.dispatch("project/showDengJiFn", true); // 登记结果
      this.$store.dispatch("project/setShowDengJiInput", false); // 不能输入登记信息
      this.$store.dispatch("project/SetIsSeeProcess", false); // 是查看流程
      this.viewDetails(row);
    },

    // 状态==0，可以修改，暂存的数据
    changeVal(row) {
      this.$store.dispatch("project/setNewPeo", true); // 是否新建项目
      this.$store.dispatch("project/showDengJiFn", false); // 登记结果
      this.$router.push("/projectManagement/outsideProject/" + row.projectId);
    },

    // 查看详情
    viewDetails(row) {
      this.$store.dispatch("project/setNewPeo", false); // 是否新建项目
      // this.$store.dispatch("project/showDengJiFn", true); // 登记结果
      this.$router.push("/projectManagement/outsideProject/" + row.projectId);
    },
    // 横向、纵向项目待审批，去审批
    toShenPro(row) {
      if (row.projectId) {
        this.$store.dispatch("project/SetIsSeeProcess", true);
        this.$store.dispatch("project/showDengJiFn", false);
      }
      this.$router.push("/projectManagement/outsideProject/" + row.projectId);

    },
  },
};
</script>
